<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-card>
      <lay-row>
        <lay-col :md="24" class="toolbar">
          <lay-col :md="6">
            <lay-button type="primary" size="sm" @click="add()" v-permission="PerKey.Content_AddOrEditView"
              prefix-icon="layui-icon-addition">新增
            </lay-button>
          </lay-col>
          <lay-col :md="18">
            <lay-form :model="queryModel" ref="layFormRef">
              <lay-row>
                <lay-col :md="4">
                  <lay-input size="sm" v-model="queryModel.title" style="width: 90%" placeholder="根据标题查询"></lay-input>
                </lay-col>
                <lay-col :md="5">
                  <lay-select size="sm" v-model="queryModel.Cid" placeholder="栏目" >
                    <lay-select-option :value="0" label="全部栏目"></lay-select-option>
                    <lay-select-option v-for="cate in cateList" :value="cate.id" :label="cate.title"
                      :disabled="cate.type == 1">
                    </lay-select-option>
                  </lay-select>
                </lay-col>
                <lay-col :md="5">
                  <lay-select size="sm" v-model="queryModel.status" placeholder="审核状态">
                    <lay-select-option :value="2" label="全部"></lay-select-option>
                    <lay-select-option :value="1" label="已审"></lay-select-option>
                    <lay-select-option :value="0" label="未审"></lay-select-option>
                  </lay-select>
                </lay-col>
                <lay-col :md="5">
                  <lay-button size="sm" type="primary" @click="GetList(queryModel)" prefix-icon="layui-icon-search">查询
                  </lay-button>
                  <lay-button size="sm" @click="reset">重置</lay-button>
                </lay-col>
              </lay-row>
            </lay-form>
          </lay-col>

        </lay-col>
        <lay-col :md="24">

          <lay-table :page="page" :columns="columns" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"
            @change="change" :size="tablesize">
            <template v-slot:title="{ data }">
              <lay-space size="xs">
                <lay-dropdown trigger="hover" updateAtScroll v-if="data.imgbl === 1" contentStyle="padding:5px">
                  <lay-icon type="layui-icon-picture" color="orange"></lay-icon>
                  <template #content>
                    <span><img :src="systemConfig.hostURL + data.img" width="260"></span>
                  </template>
                </lay-dropdown>
                <a :href="systemConfig.hostURL + '/Home/Info/Index/' + data.id" target="_blank">{{ data.title }}</a>
              </lay-space>
            </template>
            <template v-slot:changeval="{ data }">
              <div v-if="permissionsCheck(PerKey.Content_Status)">
                <lay-space size="xs">
                  <lay-switch v-model="data.status" onswitch-text="发" unswitch-text="稿" :onswitch-value="true"
                    :unswitch-value="false" @change="changeVal($event, data.id, 'Status', '发布状态')"></lay-switch>
                  <lay-switch v-model="data.attA" onswitch-text="头" unswitch-text="头" :onswitch-value="true"
                    :unswitch-value="false" @change="changeVal($event, data.id, 'AttA', '头条')"></lay-switch>
                  <lay-switch v-model="data.attB" onswitch-text="小" unswitch-text="小" :onswitch-value="true"
                    :unswitch-value="false" @change="changeVal($event, data.id, 'AttB', '小头条')"></lay-switch>
                  <lay-switch v-model="data.attC" onswitch-text="轮" unswitch-text="轮" :onswitch-value="true"
                    :unswitch-value="false" @change="changeVal($event, data.id, 'AttC', '轮换图')" v-if="data.imgbl === 1">
                  </lay-switch>
                </lay-space>
              </div>
              <div v-else>
                <lay-space size="xs">
                  <lay-badge theme="green" v-if="data.status === 1">发布</lay-badge>
                  <lay-badge theme="gray" v-else>草稿</lay-badge>
                  <lay-badge theme="blue" v-if="data.attA === 1">头条</lay-badge>
                  <lay-badge theme="blue" v-if="data.attB === 1">小头条</lay-badge>
                  <lay-badge theme="blue" v-if="data.attC === 1">轮换图</lay-badge>
                </lay-space>
              </div>
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="edit(data.id, data.cid)"
                  v-permission="PerKey.Content_AddOrEditView" prefix-icon="layui-icon-edit">
                  编辑
                </lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.Content_Delete"
                  prefix-icon="layui-icon-delete">删除
                </lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne, switchValue } from "../../../api/module/content/content";
import { PerKey } from "../../../library/permissionConst"
import { useRoute, useRouter } from "vue-router";
import { systemConfig } from "../../../library/config"
import { formChange } from "../../../types/content";
import { useUserStore } from '../../../store/user';

//单独验证内容快捷设置权限 开始
const userInfoStore = useUserStore();
const permissions = userInfoStore.userInfo.systemRole;
const permissionsCheck = (value: string) => {
  if (userInfoStore.userInfo.groupId === 1 || permissions.includes(value)) {
    return true
  } else {
    return false
  }
}
//单独验证内容快捷设置权限 结束

const selectedKeys = ref(["1"]);
const page = ref({ total: 0, limit: 15, current: 1, showCount: true, showRefresh: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('sm');
const router = useRouter();
const columns = [
  { title: "Id", width: "50px", key: "id", align: "center", },
  { title: "栏目", width: "120px", key: "cateName", align: "center", },
  { title: "标题", customSlot: "title" },
  { title: "发布部门", width: "100px", key: "deptName", align: "center", },
  { title: "发布人", width: "120px", key: "nickName", align: "center", },
  { title: "属性", customSlot: "changeval", width: "210px" },
  { title: "发布时间", key: "time", width: "160px", align: "center", },
  { title: "操作", width: "200px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])
const route = useRoute();

//定义模型
const putData = reactive({
  formchange: {
    id: 0,
    val: 0,
    Name: "",
    Title: ""
  },
  queryModel: {
    Cid: null,
    pageNum: page.value.current,
    pageSize: page.value.limit,
    title: null,
    status: null,
  }
})

const { formchange, queryModel } = toRefs(putData)
const changeVal = function (val: number, id: number, Name: string, Title: string) {
  formchange.value.id = id;
  formchange.value.val = val;
  formchange.value.Name = Name;
  formchange.value.Title = Title;
  switchValue(formchange.value as formChange).then((res) => {
    if (res.status == 1) {
      layer.msg(res.msg, { icon: 1, time: 1000 });
    } else {
      layer.msg(res.msg, { icon: 2 });
      return false;
    }
  });
}

const cateList = ref({ targetList: [] as any, })

//获取列表
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.title = query.title
    queryModel.value.status = query.status
  }
  getList(queryModel.value).then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data
      cateList.value = res.data.catelist
      page.value.total = res.data.count
    }
  })
}

const layFormRef = ref();
const reset = function () {
  layFormRef.value.reset();
}

watch(() => route.query.Cid, (val: any) => {
  queryModel.value.Cid = val;
  queryModel.value.pageNum = 1;
  GetList(queryModel.value)
}, { immediate: true, deep: true })

const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};

//修改
const edit = function (id: number, cid: number) {
  router.push({ path: '/cms/content/post', query: { Id: id, Cid: cid } })
}
//添加
const add = function () {
  router.push({ path: '/cms/content/post', query: { Id: 0, Cid: route.query.Cid } })
}
//删除
const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + " " + data.title + " 内容吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

</script>
<style scoped>
.toolbar {
  margin-bottom: 10px;
}
</style>